<template>
	<view>
		<view v-if="userInfo" class="header">
			<view class="card">
				<image src="https://www.innovationgloble.com/wxs/img/wx/integral-bg.png" mode="aspectFill" class="bg"></image>
				<view class="content">
					<view class="top">
						<image class="avatar" :src="picPath(userInfo.accountHead)" ></image>
						<view class="right">
							<view class="name-box">
								<view class="name">{{userInfo.realName || userInfo.phoneNumber}}</view>
								
								<image  class="level" :src="userInfo.vipLevelIcon" mode="heightFix"></image>
								<!-- <image v-if="vip_lvl=='VIP0'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP0.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='VIP1'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP1.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='VIP2'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP2.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='VIP3'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP3.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='VIP4'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP4.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='VIP5'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP5.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='VIP6'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP6.png" mode="heightFix"></image>
								<image v-else-if="vip_lvl=='星光会员'" class="level" src="https://www.innovationgloble.com/wxs/img/wx/VIP.png" mode="heightFix"></image> -->

								<!-- <image class="level" src="https://www.innovationgloble.com/wxs/img/wx/V1.png" mode="aspectFit"></image> -->
							</view>
							<view class="progress-box">
								<progress :percent="percent" activeColor="#BE8E53" stroke-width="8" />
							</view>
							<view class="fen">
								积分 {{integralCount || '0'}}/{{next_lvl_code||0}}
							</view>
						</view>
					</view>
					<view class="services">
						<view class="item">
							<image src="https://www.innovationgloble.com/wxs/img/wx/service-person.png" class="img" mode=""></image>
							<view class="name">经纪人服务</view>
						</view>
						<view class="item">
							<image src="https://www.innovationgloble.com/wxs/img/wx/service-account.png" class="img" mode=""></image>
							<view class="name">升级账号</view>
						</view>
						<view class="item">
							<image src="https://www.innovationgloble.com/wxs/img/wx/service-free.png" class="img" mode=""></image>
							<view class="name">免费发布</view>
						</view>
						<view class="item">
							<image src="https://www.innovationgloble.com/wxs/img/wx/service-vip.png" class="img" mode=""></image>
							<view class="name">尊享服务</view>
						</view>
						<view class="item">
							<image src="https://www.innovationgloble.com/wxs/img/wx/service-more.png" class="img" mode=""></image>
							<view class="name">查看更多</view>
						</view>
					</view>
				</view>
			</view>

			<view class="jifen">
				<view class="left" @click="goDetail">
					<view class="label">
						当前积分
					</view>
					<view class="value">
						{{integralCount || '0'}}
					</view>
					<view class="arrow">
						<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
					</view>
				</view>
				<view class="earn" @click="goEarn">
					赚积分
				</view>
			</view>
		</view>
		<view class="integral" @click="openPopup">
			<view class="title">
				平台服务
			</view>
			<image src="https://www.innovationgloble.com/wxs/img/wx/platform.png" mode="aspectFit"></image>
			<image src="https://www.innovationgloble.com/wxs/img/wx/adv.png" mode="aspectFit"></image>

			<image src="https://www.innovationgloble.com/wxs/img/wx/join.png" mode="aspectFit"></image>

			<image src="https://www.innovationgloble.com/wxs/img/wx/discount.png" mode="aspectFit"></image>
			<image src="https://www.innovationgloble.com/wxs/img/wx/hk.png" mode="aspectFit"></image>

		</view>
		<!-- 优惠卡券 -->
		<view class="rule">
			<view class="title">
				优惠卡券
			</view>
			<image @click="showToast" class="conpon-img" src="https://www.innovationgloble.com/wxs/img/wx/conpon.png" mode="aspectFit"></image>
		</view>

		<!-- 积分规则 -->
		<view class="rule">
			<image class="img" src="https://www.innovationgloble.com/wxs/img/wx/integral-rule.png" mode="aspectFit"></image>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup_box">
				<view class="popup_box_title">
					提示
				</view>
				<view class="popup_box_content">
					<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/intergral_gift.png" mode=""></image>
					<view class="popup_box_content_text">
						请登录PC端兑换服务
					</view>
					<view class="popup_box_content_url">
						https://www.innovationgloble.com
					</view>
				</view>
				<view class="popup_box_btn" @click="closePopup">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		fullpath
	} from '@/utils/index.js';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				userInfo: {},
				integralCount: 0,
				vip_lvl: '',
				next_lvl_code: 0,
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			this.reqIntegral();
		},
		computed: {
			percent() {
				return this.integralCount / this.next_lvl_code * 100;
			},
			picPath() {
				return url => fullpath(url);
			}
		},
		methods: {
			showToast(){
				uni.showToast({
					title:'功能正在开发中，敬请期待',
					icon:'none'
				})
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			goEarn() {
				uni.navigateTo({
					url: "/pagesA/integral-earn/integral-earn"
				});
			},
			goExchange() {
				uni.showModal({
					title: '提示',
					content: '请登录PC端兑换服务https://www.innovationgloble.com',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goDetail() {
				if(!permissionJudge('user:integralHistory:list')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				uni.navigateTo({
					url: "/pagesA/integralDetails/integralDetails"
				});
			},
			reqIntegral() {
				this.$request.get({
					url: 'manager/UserAllIntegral/selectMyIntegral',
					data: {},
				}).then(info => {
					this.integralCount = info;
					this.$request.get({
						url: 'dict/listVIPLevel'
					}).then(res => {
						for (let item in res) {
							if (this.integralCount < res[item].remark.replace('+', '')) {
								this.next_lvl_code = res[item].remark.replace('+', '');
								this.vip_lvl = res[item - 1].value
								return
							}
						}
					})
				}, res => {});
			},


		}
	}
</script>

<style scoped lang="less">
	page {
		min-height: 100vh;

		.header {
			height: 514upx;
			background-color: #F4F5F8;

			padding-left: 30upx;
			padding-right: 30upx;
			padding-top: 34upx;

			.card {
				position: relative;
				height: 350upx;

				.content {
					height: 350upx;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					padding: 30upx;

					.top {
						display: flex;
						flex-direction: row;
						align-items: center;

						.avatar {
							width: 120upx;
							height: 120upx;
							background: rgba(216, 216, 216, 1);
							border: 2upx solid rgba(190, 142, 83, 1);
							border-radius: 50%;
						}

						.right {
							padding-left: 24upx;
							flex: 1;

							.name-box {
								display: flex;
								flex-direction: row;
								align-items: center;

								.name {
									font-size: 34upx;
									color: #333333;
									font-weight: bold;
									margin-right: 14upx;
								}

								.level {
									height: 30upx;
									width: 78upx;
									object-fit: contain;
								}
							}

							.fen {
								color: #926B2C;
								font-size: 24upx;
							}

							.progress-box {
								width: 100%;
							}
						}
					}

					.services {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding-top: 20upx;

						.item {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.img {
								width: 82upx;
								height: 82upx;
							}

							.name {
								font-size: 22upx;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			.bg {
				width: 100%;
				height: 350upx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
			}

			.jifen {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 30upx;

				.left {
					display: flex;
					flex-direction: row;

					.label {
						line-height: 60upx;
					}

					.value {
						margin-left: 30upx;
						// height:48upx;
						font-size: 34upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(42, 125, 250, 1);
					}

					.arrow {
						margin-top: 10upx;
						margin-left: 5upx;
					}


				}

				.earn {
					width: 150upx;
					height: 56upx;
					background: rgba(42, 125, 250, 1);
					border-radius: 28upx;
					line-height: 56upx;
					text-align: center;
					color: #fff;
				}
			}

		}

		.integral {
			padding-left: 30upx;
			padding-right: 30upx;
			padding-top: 60upx;

			.title {
				width: 128upx;
				height: 32upx;
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 32upx;
				margin-bottom: 40upx;
			}

			image {
				width: 100%;
				height: 172upx;
			}
		}

		.rule {
			padding: 30upx 30upx;

			.title {
				width: 128upx;
				height: 32upx;
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 32upx;
				margin-bottom: 20upx;
			}

			.conpon-img {
				width: 100%;
				height: 610upx;
			}

			.img {
				width: 100%;
			}
		}
	}

	.popup_box {
		width: 540upx;
		height: 622upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24upx;

		.popup_box_title {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 83upx;
			color: #030303;
			font-weight: bold;
			border-bottom: 1px solid #E5E5E5;
		}

		.popup_box_content {
			text-align: center;

			image {
				width: 278upx;
				height: 199upx;
				margin: 49upx 0 38upx;
			}

			.popup_box_content_text {
				font-size: 24upx;
				color: #6F6F6F;
			}

			.popup_box_content_url {
				color: #2A7DFA;
				font-size: 26upx;
				text-decoration: underline;
			}
		}

		.popup_box_btn {
			width: 191upx;
			height: 66upx;
			background: rgba(42, 125, 250, 1);
			border-radius: 33upx;
			// display: inline-block;	
			// margin: 0 auto;
			color: #FFFFFF;
			margin: 56upx auto 0;
			font-size: 32upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
